<template>
  <div class="home">
    <el-carousel :interval="5000" arrow="always">
      <el-carousel-item v-for="(url,index) in imgs" :key="index">
        <el-image
          :src="url.productimageSrc"
          fit="cover"></el-image>
      </el-carousel-item>
    </el-carousel>
    <div>
      <router-link to="/order">去支付</router-link>
    </div>
  </div>
</template>

<script>
/*  import $ from 'jquery';*/
/*import axios from 'axios';*/ // 先安装 npm install axios
import {getHomeBanner} from "../../api";

export default {
  name: 'home',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      imgs: [
       /* {productimageSrc:'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'},
        {productimageSrc:'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg'},
        {productimageSrc:'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg'}*/
      ]
    }
  },
  mounted() {
     this.loadImgs();
  },
  methods:{
    loadImgs(){
      this.$API.home.getHomeBanner(2).then(res=>{
       console.log(res)
        this.imgs = res.data;
     })
    }
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
